<template>
  <div class="course-item">
    <img :src="course.imageUrl || defaultImageUrl" alt="Course Image">
    <div class="course-info">
      <p class="course-description">{{ course.description }}</p>
      <p class="course-speaker">主讲人：{{ course.speaker }}</p>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

// 定义默认图像的 URL
const defaultImageUrl = '/src/assets/img/course/default-course.jpg';

const props = defineProps({
  course: {
    type: Object,
    required: true
  }
});
</script>

<style scoped>
.course-item {
  width: calc(25% - 15px);
  margin-bottom: 20px;
  text-align: center;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.course-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.course-info {
  padding: 20px;
}

.course-description {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 10px;
}

.course-speaker {
  font-size: 14px;
  color: #333;
}
</style>